<template>

  <div class="table1_container">
    <div class="table1_dataShower" style="padding-bottom: 50px; padding-top: 50px; box-sizing: border-box">
      <button class="report-top-button" @click="back">返回上级页面</button>
      <div style="text-align: center; margin: 10px 0;">
        <div style="display: inline-flex; gap: 20px;">
          <!-- 未完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffffff; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>未完成</span>
          </div>

          <!-- 已完成 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #e6f7e6; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>已完成</span>
          </div>

          <!-- 不合格重采 -->
          <div style="display: flex; align-items: center;">
            <div
              style="width: 16px; height: 16px; background-color: #ffebeb; border: 1px solid #ddd; margin-right: 5px;"
            />
            <span>不合格重采</span>
          </div>
        </div>
      </div>
      <h1>材料、构配件进场检验记录</h1>
      <table class="wendu-table1_top_table">
        <tr>
          <td rowspan="2" colspan="3">工程名称</td>
          <td rowspan="2" colspan="6">中原工学院航空港校区一期（一标段、二标段）二标段建设工程项目1#学生公寓</td>
          <td rowspan="1" colspan="2">编号</td>
          <td rowspan="1" colspan="3"></td>
        </tr>
        <tr>
          <td rowspan="1" colspan="2">检验日期</td>
          <td rowspan="1" colspan="3">2025年3月17日</td>
        </tr>
        <tr>
          <td rowspan="2">序号</td>
          <td rowspan="2" colspan="2">名称</td>
          <td rowspan="2" colspan="2">规格型号</td>
          <td rowspan="2" colspan="2">进场数量（T）</td>
          <td rowspan="1" colspan="2">生产厂家</td>
          <td rowspan="1" colspan="2">外观检验项目</td>
          <td rowspan="1" colspan="2">试件编号</td>
          <td rowspan="2">备注</td>
        </tr>
        <tr>
          <td rowspan="1" colspan="2">质量证明书编号</td>
          <td rowspan="1" colspan="2">检验结果</td>
          <td rowspan="1" colspan="2">复检结果</td>
        </tr>
        <tr>
          <td rowspan="2">1</td>
          <td rowspan="2" colspan="2">钢筋</td>
          <td rowspan="2" colspan="2">HRB400EC16</td>
          <td rowspan="2" colspan="2">36.975</td>
          <td rowspan="1" colspan="2">江苏徐钢钢铁集团有限公司</td>
          <td rowspan="1" colspan="2">外观质量</td>
          <td rowspan="1" colspan="2">/</td>
          <td rowspan="2"></td>
        </tr>
        <tr>
          <td rowspan="1" colspan="2">MLW25030028553</td>
          <td rowspan="1" colspan="2">合格</td>
          <td rowspan="1" colspan="2">/</td>
        </tr>
        <tr>
          <td class="table-cell" colspan="14">
            <div class="review-title">
              <span class="label">检查意见（施工单位）</span>
            </div>
            <div>
              <span class="label">附件：共____页</span>
            </div>
            <div class="review-area">
              <!-- 审查意见填写区域 -->
            </div>
          </td>
        </tr>
        <tr>
          <td class="table-cell" colspan="14">
            <div class="review-title">
              <span class="label">验收意见（监理、建设单位）</span>
              <div class="review-area">
              </div>
            </div>
            <!-- 项目监理机构盖章和签字 - 在审查意见下方 -->
            <div class="signature-container">
              <div class="signature-content">
                <div class="left">□同意验收 □重新检验 □退场</div>
                <div>验收日期：</div>
                <div class="date-line">
                  <span class="date-label">年&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;日</span>
                </div>
              </div>
            </div>
          </td>
        </tr>
        <tr>
          <td rowspan="3">签字栏</td>
          <td rowspan="2" colspan="4">施工单位（章）</td>
          <td rowspan="2" colspan="2"></td>
          <td colspan="3">专业质检员</td>
          <td colspan="2">专业工长</td>
          <td colspan="2">检验员</td>
        </tr>
        <tr>
          <td colspan="3"></td>
          <td colspan="2"></td>
          <td colspan="2"></td>
        </tr>
        <tr>
          <td colspan="4">监理或建设单位（章）</td>
          <td colspan="5"></td>
          <td colspan="2">专业工程师</td>
          <td colspan="2"></td>
        </tr>
      </table>
    </div>
  </div>
</template>

<script>

/*
 *    这个报表真麻烦！！！
 *
 */

export default {
  data() {
    return {
      localStorageId: '',
      reportData: {},
      previewData: {}
    }
  },
  async mounted() { // 钩子函数
    // 从localstorage中拿数据
    const localStorageId = this.$route.query.localStorageId
    this.localStorageId = localStorageId // 保存id用于销毁时清理
    if (localStorageId) {
      const data = localStorage.getItem(localStorageId)
      if (data) {
        this.reportData = JSON.parse(data)
        console.log(this.reportData)
      }
    }

    // // 赶紧从接口拿数据
    // try {
    //   const { result } = await searchInpsectCheckPreview(this.reportData.taskId)
    //   console.log(result)
    //   this.previewData = result
    //   console.log(this.previewData)
    //   this.$message.success('报表已生成！')
    // } catch (err) {
    //   this.$message.error('报表生成失败！')
    // }
  },
  beforeDestroy() { // 离开页面要做的事
    // 那就是清除localstorage！！！
    if (this.localStorageId) {
      localStorage.removeItem(this.localStorageId)
    }
    document.querySelector('body').setAttribute('style', 'background-color: white;') // 还原，因为这是个全局样式
  },
  beforeCreate() {
    document.querySelector('body').setAttribute('style', 'background-color:#f5f5f5;') // 设置对比色
  },
  methods: {
    back() {
      this.$router.go(-1)
    }
  }
}
</script>

<style>
/*
先来设置每个任务项对应的背景颜色吧！
 */
.row-unfinished {
  background-color: #ffffff;
  /* 未完成 - 白色或默认色 */
}

.row-finished {
  background-color: #e6f7e6;
  /* 已完成 - 浅绿色 */
}

.row-failed {
  background-color: #ffebeb;
  /* 不合格重采 - 浅红色 */
}

.table1_container {
  width: 80%;
  background: white;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  padding-bottom: 20px;
}

.table1_dataShower {
  width: 80%;
  background: white;
  margin: 0 auto;
  border: 2px black solid;
}

/*这是返回按钮的样式*/
.report-top-button {
  display: block;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 12px 28px;
  font-size: 16px;
  font-weight: 600;
  font-family: 'Arial', sans-serif;
  color: #ffffff;
  background: linear-gradient(90deg, #1e3a8a, #3b82f6);
  /* 建筑行业蓝色调，稳重且有活力 */
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.report-top-button:hover {
  background: linear-gradient(90deg, #1e3a8a, #2563eb);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transform: translateY(-1px);
}

.report-top-button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transform: translateY(0);
}

/*表格样式*/
.wendu-table1_top_table {
  width: 90%;
  margin: 0 auto;
  border-collapse: collapse;
  border: 1px solid black;
  table-layout: fixed;
}

/*表格的样式*/
.wendu-table1_top_table tr td {
  height: 50px;
  border: 1px solid black;
  word-wrap: break-word;
  /* 允许长单词换行 */
  overflow-wrap: break-word;
  /* 更现代的换行属性 */
}

#table1_top_table_last_col {
  width: 20%;
  min-height: 50px;
}

th {
  box-sizing: border-box !important;
}

.table-cell {
  text-align: left;
  padding: 2%;
  position: relative;
}

.review-title {
  margin-top: 3%;
}

.review-area {
  min-height: 10rem;
  margin-top: 1%;
  padding: 1%;
}

.signature-content {
  display: flex;
  align-items: center; /* 垂直居中对齐（可选） */
  justify-content: space-between; /* 左右两端对齐 */
  gap: 12px; /* 子项间距，可选 */
  width: 100%;
}

@media print {
  @page {
    size: A4 portrait;
  }
}
</style>
